<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jstl/core_rt" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>注册</title>
<link type="text/css" rel="stylesheet" href="${root }/css/register.css">
<script type="text/javascript" src="${root }/js/jquery-1.8.0.js"></script>
<script type="text/javascript" src="${root }/js/jquery.validate.js"></script>
</head>
<body>
	<header>
		<jsp:include page="WEB-INF/header.jsp"></jsp:include>
	</header>
	<div class="mainCon">
		<h1>注册</h1>
		<form action="UserModel/register.action" method="post" id="regform">
			<div><span>用户名</span><input type="text" id="username" name="username" placeholder="请输入注册用户名"></div>
			<div id="error"></div>
			<div><span>昵称</span><input type="text" id="usermname" name="usermname" placeholder="请输入昵称"></div>
			<div><span>密码</span><input type="password" id="pwd" name="pwd" placeholder="请输入密码"></div>
			<div><span>确认密码</span><input type="password" id="pwd2" name="pwd2" placeholder="请输入确认密码"></div>
			<div><span>请选择性别</span><input type="radio" name="gender" value="1">男<input type="radio" name="gender" value="0">女</div>
			<div>
				<div>请选择头像</div>
				<table border="1">
					<tr>
						<c:forEach var="iconName" items="${iconNameList }" varStatus="status">
							<c:if test="${status.index == 0 }">
								<td><img src="icons/${iconName }"><br><input type="radio" name="userIconName" value="${iconName }" checked></td>
							</c:if>
							<c:if test="${status.index != 0 }">
								<td><img src="icons/${iconName }"><br><input type="radio" name="userIconName" value="${iconName }"></td>
							</c:if>
							<c:if test="${status.index % 5 == 4 }">
								</tr>
								<tr>
							</c:if>
						</c:forEach>
					</tr>
				</table>
			</div>
			<div>
				<input type="submit" id="submitBtn" value="注册">
			</div>
		</form>
	</div>
	<footer>
		<jsp:include page="WEB-INF/footer.jsp"></jsp:include>
	</footer>
</body>
<script type="text/javascript">
	$(function() {
		/* $("#username").blur(function() {
		var username = $(this).val();
		
		$.ajax({
				url : "registerNameCheck.do",
				data : {"username" : username},
				type : "GET",
				async : true,
				dataType : "html",
				success : function(result) { */
					/* alert(result); */
				/* 	$("#error").html(result);
				},
				error : function(xhr, status, error) { */
					/* alert(xhr + " " + status + " " + error); */
		/* 		}
		});
	}); */
		
		$.validator.addMethod("usernameRegx", function(value, element, param) {
			if (param.test(value) == true) {
				return true;
			}
			return false;
		});
		
		/* 用户名重复性验证 */
		$.validator.addMethod("usernameCheck", function(value, element, param) {
			var noRepeat = false;
			$.ajax({
				url : "UserModel/registerNameCheck.action",
				data : {"username" : value},
				type : "GET",
				async : false,
				dataType : "html",
				success : function(result) {
					if (!result) {
						noRepeat = true;
					}
				}
			});
			console.log(noRepeat + " " + value);
			return noRepeat;
		});
		
		$("#regform").validate({
			rules : {
				username : {
					required : true,
					minlength : 5,
					maxlength : 15,
					usernameRegx : /^\w+$/,
					usernameCheck : true
				},
				usermname : {
					required : true
				},
				pwd : {
					required : true,
					minlength : 5,
					maxlength : 20
				},
				pwd2 : {
					required : true,
					equalTo : "#pwd"
				},
				gender : {
					required : true
				}
			},
			messages : {
				username : {
					required : "用户名是必要的",
					minlength : "用户名长度至少为5",
					maxlength : "用户名长度最多为15",
					usernameRegx : "用户名只能由数字字母下划线构成",
					usernameCheck : "用户名被占用"
				},
				usermname : {
					required : "昵称是必要的"
				},
				pwd : {
					required : "密码是必要的",
					minlength : "密码长度至少为5位",
					maxlength : "密码长度至多为20位"
				},
				pwd2 : {
					required : "确认密码是必要的",
					equalTo : "两次密码必须相同"
				},
				gender : {
					required : "请选择性别"
				}
			},
			onfocusout : function(element) {
				$(element).valid();
			},
			errorPlacement : function(error, element) {
				error.appendTo(element.parent());
			}
		});
	});
	
	/* var checkName = false;
	
	var xmlHttp;
	
	function createXML() {
		if (window.XMLHttpRequest) {
			xmlHttp = new XMLHttpRequest();
		}
		else {
			xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
		}
	}
	
	window.onload = createXML();
	
	function checkUsername() {
		var username = document.getElementById("uername");
		
		xmlHttp.open("GET", "registerNameCheck.do?username=" + username, true);
		
		xmlHttp.send(null);
		
		if (xmlHttp.readyState == 4 && xmlHttp.status == 200 ) {
			alert("进入");
			var result = xmlHttp.responseText;
			
			if (result) {
				checkName = false;
			}
			else {
				checkName = true;
			}
			alert(result);
		}
	} */
</script>
</html>